<template>
  <a-card>
    <div :class="advanced ? 'search' : null">
      <a-form layout="horizontal">
        <div :class="advanced ? null : 'fold'">
          <a-row>
            <a-col :md="6" :sm="24">
              <a-form-item
                label="查询内容"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-input
                  v-model="SearchValue"
                  style="width: 100%"
                  placeholder="请输入"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span style="float: right; margin-top: 3px">
                <a-button type="primary" @click="Search">查询</a-button>
                <a-button style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <div>
      <a-tabs>
        <!-- 生者 -->
        <a-tab-pane
          v-for="(ite, index) in dataSource"
          :key="index"
          :tab="ite.roleName"
        >
          <standard-table :columns="columns" :dataSource="ite.items">
            <div slot="action" slot-scope="{ text, record }">
              <a style="margin-right: 8px" @click="$refs.editForm.edit(record)">
                <a-icon type="edit" />编辑
              </a>
              <router-link :to="`/list/query/detail/${record.key}`">
                详情
              </router-link>
            </div>
            <template slot="statusTitle">
              <a-icon @click.native="onStatusTitleClick" type="info-circle" />
            </template>
          </standard-table>
        </a-tab-pane>
      </a-tabs>
    </div>
    <edit-form ref="editForm" @ok="handleOk" />
  </a-card>
</template>

<script>
import StandardTable from "@/components/table/StandardTable";
import { getList } from "@/api/user";
import editForm from "./editForm";
export default {
  name: "aadmin",
  components: { StandardTable, editForm },
  data() {
    return {
      SearchValue: "",
      advanced: true,
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          width: 200,
          key: "id",
        },
        {
          title: "姓名",
          dataIndex: "name",
        },
        {
          title: "圣殿",
          dataIndex: "type",
        },
        {
          title: "职位",
          dataIndex: "position",
        },
        {
          title: "诞辰",
          dataIndex: "birthday",
        },
        {
          title: "职责",
          dataIndex: "mode",
        },
        {
          title: "操作",
          scopedSlots: { customRender: "action" },
        },
      ],
      dataSource: [],
      selectedRows: [],
    };
  },

  created() {
    this.LoadList();
  },
  methods: {
    LoadList(data) {
      getList(data).then((res) => {
        this.dataSource = res.data;
      });
    },
    Search() {
      this.LoadList({ SearchValue: this.SearchValue });
    },
    // kljhh
    handleOk() {
      this.$refs.table.refresh();
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  margin-bottom: 54px;
}
.fold {
  width: calc(100% - 216px);
  display: inline-block;
}
.operator {
  margin-bottom: 18px;
}
@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
</style>
